<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 文件字符编码 -->
		<meta charset="utf-8">
		<!-- 兼容手机,禁止缩放 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 告诉IE使用最新内核 -->
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>简单的canvas画板</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			html{
				overflow: hidden;
			}
			canvas {
				/* border: #FF0000 1px solid; */
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="" height=""></canvas>
	</body>
	<script type="text/javascript">
		let canvas_id = document.querySelector('#canvas');
		canvas_id.width = document.documentElement.clientWidth;
		canvas_id.height = document.documentElement.clientHeight;
		console.log(canvas_id);
		let ctx = canvas_id.getContext('2d');
		ctx.fillStyle = "#2E9AFE";
		ctx.strokeStyle = '#2E9AFE';
		ctx.lineWidth = 8;
		ctx.lineCap = 'round';

		let painting = false;

		let last;

		letisTouchDevice = 'ontouchstart' in document.documentElement;
		if (letisTouchDevice) {
			canvas_id.ontouchstart = (e)=>{
				let x = e.clientX;
				let y = e.clientY;
				last = [x,y];
			}
			canvas_id.ontouchmove = (e)=>{
				let x = e.touches[0].clientX;
				let y = e.touches[0].clientY;
				drawLine(last[0],last[1],x,y);
				last = [x,y];
			}
		} else {
			canvas_id.onmousedown = (e) => {
				painting = true;
				last = [e.clientX,e.clientY];
			}
			}
			canvas_id.onmousemove = (e) => {
				if (painting) {
					drawLine(last[0],last[1],e.clientX,e.clientY);
					last = [e.clientX,e.clientY];
				}
			canvas_id.onmouseup = (e) =>{
				painting = false;
			}
		}
		function drawLine(x1,y1,x2,y2){
			ctx.beginPath();
			ctx.moveTo(x1,y1);
			ctx.lineTo(x2,y2);
			ctx.stroke();
		}
	</script>
</html>
